<template>
  <div>
    <div>
      <transition-group name="van-fade">
        <div class="end" key="1">
          <van-popup
            v-model="show"
            closeable
            close-icon="close"
            position="bottom"
            :style="{ height: '100%' }"
          >
            <div class="bigbox">
              <!-- <div class="songname">
                <p>{{}}</p>
              </div> -->
              <div class="songimg">
                <div class="posimg">
                  <img :src="newlist.audioPic" alt="" ref="first" />
                    <div class="bg2"></div>
              <div class="bg3"></div>
                </div>
                <div class="gundong">
                  <van-notice-bar
                    ref="playvideo"
                    scrollable
                    :text="newlist.audioName"
                  />
                </div>

                <div class="kuaijin">
                  <van-slider v-model="value" @change="onChange" />
                  <div class="songtime">
                    <div class="left">
                      <span v-if="parseInt(this.currentTime / 60) < 10">0</span>
                      <span>{{ parseInt(this.currentTime / 60) }}:</span>
                      <span v-if="this.currentTime % 60 < 10"
                        >0{{ this.currentTime % 60 }}</span
                      >
                      <span v-else>{{ this.currentTime % 60 }}</span>
                    </div>
                    <div class="right">
                      <span v-if="parseInt(this.total / 60) < 10">0</span>
                      <span>{{ parseInt(this.total / 60) }}:</span>
                      <span>{{ this.total % 60 }}</span>
                      <span v-if="this.total % 60 < 10">0</span>
                    </div>
                  </div>
                </div>

                <div class="set">
                  <van-icon name="arrow-left" size="36px"  @click="left"/>
                  <van-icon
                    name="play-circle-o"
                    size="36px"
                    v-if="listen"
                    @click="playvideo"
                  />
                  <van-icon
                    name="pause-circle-o"
                    size="36px"
                    v-else
                    @click="stopvideo"
                  />
                  <van-icon name="arrow" @click="next" size="36px" />
                </div>
              </div>
              <div
                class="bgc"
                :style="{ background: `url(${newlist.audioPic})  100% 100% ` }"
              ></div>
            
            </div>
          </van-popup>
          <div class="music" key="2" v-if="playlist.length > 0">
            <div class="left" key="3">
              <van-cell
                is-link
                @click="showPopup"
                style="background: none"
              ></van-cell>
              <van-image
                v-if="zhuan"
                round
                radius="50%"
                fit="cover"
                id="listenimg"
                :src="playlist[this.count].albumPic"
              />
              <van-image
                v-else
                round
                ref="firstimg"
                radius="50%"
                fit="cover"
                id="listenimg1"
                :src="playlist[this.count].albumPic"
              />
              <p class="name van-multi-ellipsis--l2" ref="firsttext">
                {{ playlist[this.count].audioName }}
              </p>
            </div>

            <div class="right" key="4">
              <audio
                id="play"
                controlsList="nodownload"
                controls="false"
                name="media"
                ref="veo"
              >
                <source
                  id="playsrc"
                  ref="indeximg"
                  :src="playlist[this.count].mp3PlayUrl"
                  type="audio/mpeg"
                  v-if="playlist.length > 0"
                />
              </audio>
              <van-icon
                name="arrow"
                size="20px"
                @click="next"
                @click.stop
                class="rightarr"
                color="rgba(80, 80, 80, 0.9)"
              />
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["listenlist", "flag", "kid", "i", "songname"],

  data() {
    return {
      id: this.listenlist.id,
      time: 0,
      playlist: [],
      count: 0,
      newlist: [],
      nid: 0,
      aid: 0,
      play: 0,
      show: false,
      listen: true,
      music: this.$refs.veo,
      firveo: null,
      value: 0,
      total: 0, //总时长
      p: 0,
      zhuan: false,
      currentTime: 0,
      // currentTime:this.$refs.veo.currentTime
    };
  },
  methods: {
    onChange(value) {
      // console.log(value);
      this.$refs.veo.currentTime = (value / 100) * this.total;
      // console.log(this.$refs.veo.currentTime);
    },
    changezhuan1() {
      this.zhuan = true;
      //  console.log(this.zhuan)
    },
    changezhuan2() {
      this.zhuan = false;
      //  console.log(this.zhuan)
    },
    stopvideo() {
      this.$refs.veo.pause();
      // console.log(this.$refs.veo);
      this.listen = true;
      // console.log(1);
    },
    playvideo() {
      this.$refs.veo.play();
      this.listen = false;
      // console.log(2);
    },
    showPopup() {
      this.show = true;
    },
    next() {
      this.count++;
       console.log(this.count)
      if (this.count >= this.playlist.length) {
        this.count = 0;
      }

      var video = document.querySelector("#play");
      video.load();
      video.play();
      this.listen = true;
      // console.log(this.count);
      // console.log(this.playlist[this.count].mp3PlayUrl);
    },

    left() {
      this.count--;
      console.log(this.count)
      if (this.count <= 0) {
        this.count = 0;
      }

      var video = document.querySelector("#play");
      video.load();
      video.play();
      this.listen = true;
    },
  },
  watch: {
    kid(v) {
      this.nid = v;
      this.count = 0;
      this.listen = false;
      this.$ajax
        .getvideo({
          needSourceFilter: 0,
          id: v,
          pagesize: 20,
          pagenum: 1,
          sorttype: 1,
          _: this.time,
          n: 0,
        })
        .then((res) => {
          var playvideo = document.querySelector("#playsrc");
          var video = document.querySelector("#play");
          var img = document.querySelector(".van-image__img");
          var text = document.querySelector(".name");
          this.playlist = res.result.dataList;
          for (let i = 0; i < this.playlist.length; i++) {
            if (this.playlist[i].audioName == this.songname) {
              this.play = i;
              this.count = i;
            }
          }
          this.newlist = this.playlist[this.play];
          // console.log(this.playlist, this.newlist);
          img.src = this.newlist.audioPic; //更改video头象
          this.total = Math.floor(this.$refs.veo.duration);
          this.value = 0;
          // console.log("总时长---", this.total);
          console.log("----已改头象");
          text.innerText = this.newlist.audioName; //更改歌曲名
          console.log("-----已改名子" + text.innerText);

          setTimeout(() => {
            //播放条
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
              this.p++;
              if (isNaN(this.total)) {
                this.total = 300;
                this.value = (this.$refs.veo.currentTime / this.total) * 100;
                this.currentTime = Math.floor(this.$refs.veo.currentTime);
                console.log(this.currentTime);
              } else {
                this.value = (this.$refs.veo.currentTime / this.total) * 100;
                this.currentTime = Math.floor(this.$refs.veo.currentTime);
              }
              if (this.p >= this.total) {
                clearTimeout(this.timer);
              }
            }, 1000);
          }, 1000);

          video.load();
          video.play();
        });
    },
    i(v) {
      this.listen = false;
      this.n = v;
      this.$ajax
        .getvideo({
          needSourceFilter: 0,
          id: this.kid,
          pagesize: 20,
          pagenum: 1,
          sorttype: 1,
          _: this.time,
          n: 0,
        })
        .then((res) => {
          var video = document.querySelector("#play");
          var img = document.querySelector(".van-image__img");
          var text = document.querySelector(".name");
          this.playlist = res.result.dataList;
          this.newlist = this.playlist[this.n];
          this.count = this.n;
          this.value = 0;
          this.total = Math.floor(this.$refs.veo.duration);

          // console.log("总时长---", this.total);
          // console.log(this.playlist, this.newlist);
          img.src = this.newlist.audioPic; //更改video头象
          text.innerText = this.newlist.audioName; //更改歌曲名

          setTimeout(() => {
            //播放条
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
              this.p++;
              if (isNaN(this.total)) {
                this.total = 300;
                this.currentTime = Math.floor(this.$refs.veo.currentTime);
                this.value = (this.$refs.veo.currentTime / this.total) * 100;
              } else {
                this.value = (this.$refs.veo.currentTime / this.total) * 100;
                this.currentTime = Math.floor(this.$refs.veo.currentTime);
              }
              if (this.p >= this.total) {
                clearTimeout(this.timer);
              }
              // console.log(this.$refs.veo.currentTime);
            }, 1000);
          }, 1000);
          video.load();
          video.play();
        });
    },

    count(v) {
      this.listen = false;
      // if(this.$route.name=="detail"){
      this.$ajax
        .getvideo({
          needSourceFilter: 0,
          id: this.kid,
          pagesize: 20,
          pagenum: 1,
          sorttype: 1,
          _: this.time,
          n: 0,
        })
        .then((res) => {
          var video = document.querySelector("#play");
          var img = document.querySelector(".van-image__img");
          var text = document.querySelector(".name");
          this.playlist = res.result.dataList;
          this.newlist = this.playlist[v];
          this.total = Math.floor(this.$refs.veo.duration);
          this.value = 0;
          // console.log("总时长----", this.total);
          // console.log(this.playlist, this.newlist);
          img.src = this.newlist.audioPic; //更改video头象
          text.innerText = this.newlist.audioName; //更改歌曲名
          // console.log(img.src, text.innerText);
          // console.log(this.count);
          setTimeout(() => {
            //播放条
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
              this.p++;
              if (isNaN(this.total)) {
                this.total = 300;
                this.currentTime = Math.floor(this.$refs.veo.currentTime);
                this.value = (this.$refs.veo.currentTime / this.total) * 100;
              } else {
                this.value = (this.$refs.veo.currentTime / this.total) * 100;
                this.currentTime = Math.floor(this.$refs.veo.currentTime);
              }
              if (this.p >= this.total) {
                clearTimeout(this.timer);
              }
              // console.log(this.$refs.veo.currentTime);
            }, 1000);
          }, 1000);

          video.load();
          video.play();
        });

      // }
    },
  },
  mounted() {
    // console.log(this.listenlist.id);

    setInterval(() => {
      //获取最新时间戳
      this.time = new Date().getTime();
    }, 10000);

    this.$ajax
      .getvideo({
        needSourceFilter: 0,
        id: 1100001472886,
        pagesize: 20,
        pagenum: 1,
        sorttype: 1,
        _: this.time,
      })
      .then((res) => {
        this.playlist = res.result.dataList;
        setTimeout(() => {
          let video = document.querySelector("#play");
          video.addEventListener("play", this.changezhuan1);
          video.addEventListener("pause", this.changezhuan2);
        }, 1000);
      });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>


<style scoped lang="scss">
.music {
  display: flex;
  position: relative;
  text-align: left;
  align-items: center;
  width: 96%;
  height: 60px;
  background-color: rgb(80, 80, 80, 0.9);
  border-radius: 8px;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: auto;
  justify-content: flex-start;
  .left {
    display: flex;
    text-align: left;
    align-items: center;
  }
  .right {
    height: 100%;
    display: flex;
    text-align: left;
    align-items: center;
    min-width: 140px;
  }
}
#listenimg {
  width: 18%;
  height: 80%;
  margin-left: 10px;
  -webkit-transform: rotate(360deg);

  animation: rotation 5s linear infinite;

  -moz-animation: rotation 5s linear infinite;

  -webkit-animation: rotation 5s linear infinite;

  -o-animation: rotation 5s linear infinite;
}
#listenimg1 {
  width: 18%;
  height: 80%;
  margin-left: 10px;
}
.name {
  color: #fff;
  font-size: 14px;
  width: 130px;
  margin-left: 3%;
  text-align: left;
}
#play {
  margin-right: 5%;
}

.v-touch {
  touch-action: pan-y !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

#play {
  overflow: hidden;
  width: 100%;
  // height: 50px;
  opacity: 0.2;
}

::v-deep .van-notice-bar {
  color: #000;
  background: none;
}

// ::v-deep .van-icon-arrow {
//   // display: none;
// }

.bigbox {
  height: 100%;
  width: 100%;
  background: #fff;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.songimg {
  z-index: 2;
  width: 90%;
  height: 70%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
  align-items: center;
  img {
    width: 90%;
    height: 70%;
    border-radius: 10px;
    margin-left: 5%;
  }
}
::v-deep .van-cell--clickable {
  position: absolute;
  height: 100%;
  background-color: none !important;
}

.boxvideo {
  width: 80%;
}
.set {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.gundong {
  margin-top: 20px;
  font-size: 14px;
  width: 80%;
  text-align: center;
  margin-left: 10%;
}
::v-deep .van-notice-bar__content {
  font-size: 16px;
}

.rightarr {
  margin-right: 10px;
}

.bgc {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: blur(60px);
  -webkit-filter: blur(60px);
}
::v-deep .van-icon-close {
  font-size: 30px;
  // color: #000;
}
::v-deep .van-icon {
  color: #c8c9cc;
}

::v-deep .van-slider {
  width: 80%;
  margin-top: 25px;
  margin-left: 10%;
}
.songtime {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  width: 80%;
  margin-left: 10%;
  font-size: 14px;
  color: #c8c9cc;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.songname {
  margin-top: 5%;
  font-size: 18px;
}

.posimg{
  position: relative;
}
.bg2 {
  width:80%;
  background-color: rgb(255, 255, 255, 0.7);
  height: 12px;
  position: absolute;
  top: -4%;
  left: 10%;
  border-radius: 3px 3px 0px 0px;
}
.bg3 {
  width: 68%;
  background-color: rgb(255, 255, 255, 0.2);
  height: 18px;
  position: absolute;
  top:-6%;
  left: 18%;
  border-radius: 3px;
}
</style>